import "./index.scss";
import {
  Tabs,
  Space,
  Table,
  Button,
  Form,
  Input,
  Select,
  DatePicker,
  message,
  Modal,
} from "antd";
import type { ColumnsType } from "antd/es/table";
import "dayjs/locale/zh-cn";
import locale from "antd/es/date-picker/locale/zh_CN";
import { useNavigate } from "react-router-dom";
import { CSVLink } from "react-csv";
import React, { useState, useEffect } from "react";
import http from "../../../utils/http";

//标签页
const onChange = (key: string) => {
  console.log(key);
};

const Training = () => {
  //时间转换
  const toDub = (n: any) => (n < 10 ? "0" + n : "" + n);
  //年月日时分秒
  const toTime = (date: any) => {
    const oTime = new Date(date);
    return (
      oTime.getFullYear() +
      "-" +
      toDub(oTime.getMonth() + 1) +
      "-" +
      toDub(oTime.getDate()) +
      " " +
      toDub(oTime.getHours()) +
      ":" +
      toDub(oTime.getMinutes()) +
      ":" +
      toDub(oTime.getSeconds())
    );
  };
  //年月日
  const toDate = (date: any) => {
    const oDate = new Date(date);
    return (
      oDate.getFullYear() +
      "-" +
      toDub(oDate.getMonth() + 1) +
      "-" +
      toDub(oDate.getDate())
    );
  };

  //获取所有机构
  const [ins,useins]=useState([])
  const getIns = () => {
    http({
      url: "/getIns",
    }).then((res) => {
      console.log("-------", res.data);

      let ins = res.data.map((v: { oname: any }) => {
        return v;
      });
      console.log("insinsins", ins);
      useins(ins)
    });
  };
  useEffect(() => {
    getIns();
  }, []);

  //点击跳转详情
  const navigate = useNavigate();
  const toTrainingDetail = (record: any) => {
    navigate(`/home/trainingDetail`, { state: record });
  };

  // 表格数据类型
  interface DataType {
    key: string;
    oname: string;
    obehalf: string;
    ocharge: string;
    ophone: string;
    oaddress: string;
    otype: string;
    otime: string;
    ostate: string;
    owhy: string;
    onum: string;
    ogoal: string;
    orange: string;
    ocourse: string;
    oform: string;
    omoney: string;
    otop: string;
    otext: string;
    olicense: string;
    olicensetype: string;
    ocode: string;
    oexpire: string;
  }

  const [data1, setData1] = useState([]);
  //待颁证表格内容
  const columns: ColumnsType<DataType> = [
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
      render: (text, record) => <a className="oname">{text}</a>,
    },
    {
      title: "法人代表",
      dataIndex: "obehalf",
      key: "obehalf",
    },
    {
      title: "办学地址",
      dataIndex: "oaddress",
      key: "oaddress",
    },
    {
      title: "办学内容",
      dataIndex: "otext",
      key: "otext",
    },

    {
      title: "办学资金",
      dataIndex: "omoney",
      key: "omoney",
    },
    {
      title: "提交时间",
      dataIndex: "otime",
      key: "otime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
    {
      title: "操作",
      key: "oaction",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              toTrainingDetail(record);
            }}
            style={{ color: "#fc6080" }}
          >
            详情
          </a>

          <a
            onClick={() => {
              showEdit(record);
            }}
            className="edit"
          >
            编辑
          </a>
        </Space>
      ),
    },
  ];
  //待颁证数据渲染
  const getData1 = () => {
    http({
      url: "/getTrainingOne",
    }).then((res) => {
      console.log("待颁证数据", res);
      let _data1 = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData1(_data1);
    });
  };
  useEffect(() => {
    getData1();
  }, []);
  //待颁证搜索的表单
  const [searchText1] = Form.useForm();
  //待颁证搜索
  const onSearch1 = (search: any) => {
    http({
      url: "/searchTrainingOne",
      params: {
        oname: search.oname || "",
        obehalf: search.obehalf || "",
        omoney: search.omoney || "",
        otime:
          toDate(search.otime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.otime) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData1(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //待颁证清空搜索
  const clear1 = () => {
    searchText1.resetFields();
    getData1();
  };
  //待颁证导出excel表
  const toExcel1 = () => {
    console.log("all", data1);
  };
  // 待颁证编辑框
  const [editForm] = Form.useForm();
  const [isModalOpen, setIsEditOpen] = useState(false);

  const showEdit = (record: any) => {
    console.log("editrecord", record);
    editForm.setFieldsValue({ ...record });
    setIsEditOpen(true);
  };
  // 待颁证确定编辑
  const handleOk = () => {
    const data = editForm.getFieldsValue(true);
    http({
      url: "/editTrainingOne",
      method: "post",
      data: data,
    }).then((res: { [key: string]: any }) => {
      console.log(res);
      if (res.error == 0) {
        message.success("修改成功");
        setIsEditOpen(false);
        getData1();
        getData2();
        getData3();
        getData4();
      } else {
        message.error("修改失败");
      }
    });
    setIsEditOpen(false);
  };
  const handleCancel = () => {
    setIsEditOpen(false);
  };

  const [data2, setData2] = useState([]);
  //正常表格内容
  const columns1: ColumnsType<DataType> = [
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
      render: (text, record) => <a className="oname">{text}</a>,
    },
    {
      title: "法人代表",
      dataIndex: "obehalf",
      key: "obehalf",
    },
    {
      title: "办学地址",
      dataIndex: "oaddress",
      key: "oaddress",
    },
    {
      title: "办学内容",
      dataIndex: "otext",
      key: "otext",
    },
    {
      title: "许可编号",
      dataIndex: "onum",
      key: "onum",
    },
    {
      title: "发证日期",
      dataIndex: "osend",
      key: "osend",
      render: (text) => <a className="todate">{toDate(text)}</a>,
    },
    {
      title: "有效期至",
      dataIndex: "oexpire",
      key: "oexpire",
      render: (text) => <a className="todate">{toDate(text)}</a>,
    },
    {
      title: "办学资金",
      dataIndex: "omoney",
      key: "omoney",
    },
    {
      title: "提交时间",
      dataIndex: "otime",
      key: "otime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
    {
      title: "操作",
      key: "oaction",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              toTrainingDetail(record);
            }}
            style={{ color: "#fc6080" }}
          >
            详情
          </a>

          <a
            onClick={() => {
              showEdit1(record);
            }}
            className="edit"
          >
            编辑
          </a>
        </Space>
      ),
    },
  ];
  //正常数据渲染
  useEffect(() => {
    getData2();
  }, []);
  const getData2 = () => {
    http({
      url: "/getTrainingTwo",
    }).then((res) => {
      let _data2 = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData2(_data2);
    });
  };
  //正常搜索的表单
  const [searchText2] = Form.useForm();
  //正常搜索
  const onSearch2 = (search: any) => {
    http({
      url: "/searchTrainingTwo",
      params: {
        oname: search.oname || "",
        obehalf: search.obehalf || "",
        omoney: search.omoney || "",
        onum: search.onum || "",
        otype: search.otype || "",
        osend:
          toDate(search.osend) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.osend) || "",
        oexpire:
          toDate(search.oexpire) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.oexpire) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData2(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //正常清空搜索
  const clear2 = () => {
    searchText2.resetFields();
    getData2();
  };
  //正常导出excel表
  const toExcel2 = () => {
    console.log("all", data2);
  };
  // 正常编辑框
  const [editForm1] = Form.useForm();
  const [isModalOpen1, setIsEditOpen1] = useState(false);

  const showEdit1 = (record: any) => {
    console.log("editrecord1", record);
    editForm1.setFieldsValue({ ...record });
    setIsEditOpen1(true);
  };
  // 正常确定编辑
  const handleOk1 = () => {
    const data1 = editForm1.getFieldsValue(true);
    http({
      url: "/editTrainingTwo",
      method: "post",
      data: data1,
    }).then((res: { [key: string]: any }) => {
      console.log(res);
      if (res.error == 0) {
        message.success("修改成功");
        setIsEditOpen1(false);
        getData1();
        getData2();
        getData3();
        getData4();
      } else {
        message.error("修改失败");
      }
    });
    setIsEditOpen1(false);
  };
  const handleCancel1 = () => {
    setIsEditOpen1(false);
  };

  const [data3, setData3] = useState([]);
  //黑名单表格内容
  const columns2: ColumnsType<DataType> = [
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
      render: (text, record) => <a className="oname">{text}</a>,
    },
    {
      title: "法人代表",
      dataIndex: "obehalf",
      key: "obehalf",
    },
    {
      title: "办学内容",
      dataIndex: "otext",
      key: "otext",
    },
    {
      title: "许可编号",
      dataIndex: "onum",
      key: "onum",
    },
    {
      title: "办学地址",
      dataIndex: "oaddress",
      key: "oaddress",
    },
    {
      title: "操作",
      key: "oaction",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              toTrainingDetail(record);
            }}
            style={{ color: "#fc6080" }}
          >
            详情
          </a>

          <a
            onClick={() => {
              showEdit2(record);
            }}
            className="edit"
          >
            编辑
          </a>
        </Space>
      ),
    },
  ];
  //黑名单数据渲染
  const getData3 = () => {
    http({
      url: "/getTrainingThree",
    }).then((res) => {
      let _data3 = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData3(_data3);
    });
  };
  useEffect(() => {
    getData3();
  }, []);
  //黑名单搜索的表单
  const [searchText3] = Form.useForm();
  //黑名单搜索
  const onSearch3 = (search: any) => {
    console.log("search", JSON.stringify(search));
    http({
      url: "/searchTrainingThree",
      params: {
        oname: search.oname || "",
        onum: search.onum || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData3(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //黑名单清空搜索
  const clear3 = () => {
    searchText3.resetFields();
    getData3();
  };
  //黑名单导出excel表
  const toExcel3 = () => {
    console.log("all", data3);
  };
  // 黑名单编辑框
  const [editForm2] = Form.useForm();
  const [isModalOpen2, setIsEditOpen2] = useState(false);

  const showEdit2 = (record: any) => {
    console.log("editrecord2", record);
    editForm2.setFieldsValue({ ...record });
    setIsEditOpen2(true);
  };
  // 黑名单确定编辑
  const handleOk2 = () => {
    const data2 = editForm2.getFieldsValue(true);
    http({
      url: "/editTrainingThree",
      method: "post",
      data: data2,
    }).then((res: { [key: string]: any }) => {
      console.log(res);
      if (res.error == 0) {
        message.success("修改成功");
        setIsEditOpen2(false);
        getData1();
        getData2();
        getData3();
        getData4();
      } else {
        message.error("修改失败");
      }
    });
    setIsEditOpen2(false);
  };
  const handleCancel2 = () => {
    setIsEditOpen2(false);
  };

  const [data4, setData4] = useState([]);
  //停业整顿表格内容
  const columns3: ColumnsType<DataType> = [
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
      render: (text, record) => <a className="oname">{text}</a>,
    },
    {
      title: "法人代表",
      dataIndex: "obehalf",
      key: "obehalf",
    },
    {
      title: "办学内容",
      dataIndex: "otext",
      key: "otext",
    },
    {
      title: "许可编号",
      dataIndex: "onum",
      key: "onum",
    },
    {
      title: "办学地址",
      dataIndex: "oaddress",
      key: "oaddress",
    },
    {
      title: "操作",
      key: "oaction",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              toTrainingDetail(record);
            }}
            style={{ color: "#fc6080" }}
          >
            详情
          </a>

          <a
            onClick={() => {
              showEdit3(record);
            }}
            className="edit"
          >
            编辑
          </a>
        </Space>
      ),
    },
  ];
  //停业整顿数据渲染
  useEffect(() => {
    getData4();
  }, []);
  const getData4 = () => {
    http({
      url: "/getTrainingFour",
    }).then((res) => {
      console.log("停业整顿数据", res);
      let _data4 = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData4(_data4);
    });
  };
  //停业整顿搜索的表单
  const [searchText4] = Form.useForm();
  //停业整顿搜索
  const onSearch4 = (search: any) => {
    console.log("search", JSON.stringify(search));
    http({
      url: "/searchTrainingFour",
      params: {
        oname: search.oname || "",
        onum: search.onum || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData4(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //停业整顿清空搜索
  const clear4 = () => {
    searchText4.resetFields();
    getData4();
  };
  //停业整顿导出excel表
  const toExcel4 = () => {
    console.log("all", data4);
  };
  // 停业整顿编辑框
  const [editForm3] = Form.useForm();
  const [isModalOpen3, setIsEditOpen3] = useState(false);

  const showEdit3 = (record: any) => {
    console.log("editrecord3", record);
    editForm3.setFieldsValue({ ...record });
    setIsEditOpen3(true);
  };
  // 停业整顿确定编辑
  const handleOk3 = () => {
    const data3 = editForm3.getFieldsValue(true);
    http({
      url: "/editTrainingFour",
      method: "post",
      data: data3,
    }).then((res: { [key: string]: any }) => {
      console.log(res);
      if (res.error == 0) {
        message.success("修改成功");
        setIsEditOpen3(false);
        getData1();
        getData2();
        getData3();
        getData4();
      } else {
        message.error("修改失败");
      }
    });
    setIsEditOpen3(false);
  };
  const handleCancel3 = () => {
    setIsEditOpen3(false);
  };

  return (
    <div className="training">
      <div className="title">培训机构管理</div>
      <div className="hr"></div>

      {/* 标签页 */}
      <Tabs
        defaultActiveKey="1"
        onChange={onChange}
        items={[
          {
            label: `待颁证`,
            key: "1",
            children: (
              <>
                <Form
                  className="boxBig"
                  form={searchText1}
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch1}
                >
                  <Form.Item name="oname" label="机构名称">
                    <Input />
                  </Form.Item>

                  <Form.Item name="obehalf" label="法人代表">
                    <Input />
                  </Form.Item>

                  <Form.Item label="通过时间" name="otime">
                    <DatePicker
                      className="otime"
                      locale={locale}
                      placeholder=""
                    />
                  </Form.Item>

                  <Form.Item name="omoney" label="办学资金">
                    <Input style={{ width: "150px" }} />
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear1}>
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={toExcel1}>
                      <CSVLink
                        className="edit"
                        data={data1}
                        filename="培训机构管理-待颁证导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                  dataSource={data1}
                />

                {/* 待颁证编辑框 */}
                <Modal
                  title="编辑"
                  open={isModalOpen}
                  onOk={handleOk}
                  onCancel={handleCancel}
                  okText={"确认"}
                  cancelText={"取消"}
                >
                  <Form
                    form={editForm}
                    name="basic"
                    initialValues={{ remember: true }}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    autoComplete="off"
                  >
                    <Form.Item label="序号" name="id">
                      <Input disabled />
                    </Form.Item>
                    <Form.Item
                      label="机构名称"
                      name="oname"
                      rules={[
                        {
                          required: true,
                          message: "请选择机构名称!",
                        },
                      ]}
                    >
                      <Select disabled allowClear={true}>
                      {ins.map((i: any) => (
                        <Select.Option value={i.oname}>{i.oname}</Select.Option>
                      ))}
                    </Select>
                    </Form.Item>

                    <Form.Item
                      label="法人代表"
                      rules={[
                        {
                          required: true,
                          pattern: /^[\u2E80-\u9FFF]+$/,
                          message: "请输入法人代表姓名!",
                        },
                      ]}
                      name="obehalf"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="办学地址"
                      name="oaddress"
                      rules={[{ required: true, message: "请选择办学地址!" }]}
                    >
                      <Select>
                        <Select.Option value="锦江区">锦江区</Select.Option>
                        <Select.Option value="青羊区">青羊区</Select.Option>
                        <Select.Option value="金牛区">金牛区</Select.Option>
                        <Select.Option value="武侯区">武侯区</Select.Option>
                        <Select.Option value="成华区">成华区</Select.Option>
                        <Select.Option value="龙泉驿区">龙泉驿区</Select.Option>
                        <Select.Option value="新都区">新都区</Select.Option>
                        <Select.Option value="郫都区">郫都区</Select.Option>
                        <Select.Option value="温江区">温江区</Select.Option>
                        <Select.Option value="双流区">双流区</Select.Option>
                        <Select.Option value="青白江区">青白江区</Select.Option>
                        <Select.Option value="新津区">新津区</Select.Option>
                        <Select.Option value="都江堰市">都江堰市</Select.Option>
                        <Select.Option value="彭州市">彭州市</Select.Option>
                        <Select.Option value="邛崃市">邛崃市</Select.Option>
                        <Select.Option value="崇州市">崇州市</Select.Option>
                        <Select.Option value="简阳市">简阳市</Select.Option>
                        <Select.Option value="大邑县">大邑县</Select.Option>
                        <Select.Option value="浦江县">浦江县</Select.Option>
                        <Select.Option value="金堂县">金堂县</Select.Option>
                      </Select>
                    </Form.Item>

                    <Form.Item
                      label="办学内容"
                      rules={[
                        {
                          required: true,
                          message: "请输入办学内容!",
                        },
                      ]}
                      name="otext"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="办学资金"
                      rules={[
                        {
                          required: true,
                          message: "请输入办学资金!",
                        },
                      ]}
                      name="omoney"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="机构状态"
                      rules={[{ required: true, message: "请选择机构状态!" }]}
                      name="otop"
                    >
                      <Select>
                        <Select.Option value="待颁证">待颁证</Select.Option>
                        <Select.Option value="正常">正常</Select.Option>
                        <Select.Option value="黑名单">黑名单</Select.Option>
                        <Select.Option value="停业整顿">停业整顿</Select.Option>
                      </Select>
                    </Form.Item>
                  </Form>
                </Modal>
              </>
            ),
          },
          {
            label: `正常`,
            key: "2",
            children: (
              <>
                <Form
                  form={searchText2}
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch2}
                  className="boxBig"
                >
                  <Form.Item name="oname" label="机构名称">
                    <Input />
                  </Form.Item>

                  <Form.Item name="obehalf" label="法人代表">
                    <Input />
                  </Form.Item>

                  <Form.Item name="omoney" label="办学资金">
                    <Input style={{ width: "150px" }} />
                  </Form.Item>

                  <Form.Item name="onum" label="许可编号">
                    <Input style={{ width: "220px" }} />
                  </Form.Item>

                  <Form.Item name="osend" label="发证日期">
                    <DatePicker
                      className="otime"
                      locale={locale}
                      placeholder=""
                    />
                  </Form.Item>

                  <Form.Item name="oexpire" label="有效期至">
                    <DatePicker
                      className="otime"
                      locale={locale}
                      placeholder=""
                    />
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear2}>
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={toExcel2}>
                      <CSVLink
                        className="edit"
                        data={data2}
                        filename="培训机构管理-正常导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns1}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                  dataSource={data2}
                />

                {/* 正常编辑框 */}
                <Modal
                  title="编辑"
                  open={isModalOpen1}
                  onOk={handleOk1}
                  onCancel={handleCancel1}
                  okText={"确认"}
                  cancelText={"取消"}
                >
                  <Form
                    form={editForm1}
                    name="basic"
                    initialValues={{ remember: true }}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    autoComplete="off"
                  >
                    <Form.Item label="序号" name="id">
                      <Input disabled />
                    </Form.Item>

                    <Form.Item
                      label="机构名称"
                      name="oname"
                      rules={[
                        {
                          required: true,
                          message: "请选择机构名称!",
                        },
                      ]}
                    >
                      <Select disabled allowClear={true}>
                      {ins.map((i: any) => (
                        <Select.Option value={i.oname}>{i.oname}</Select.Option>
                      ))}
                    </Select>
                    </Form.Item>

                    <Form.Item
                      label="法人代表"
                      rules={[
                        {
                          required: true,
                          pattern: /^[\u2E80-\u9FFF]+$/,
                          message: "请输入法人代表姓名!",
                        },
                      ]}
                      name="obehalf"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="办学地址"
                      name="oaddress"
                      rules={[{ required: true, message: "请选择办学地址!" }]}
                    >
                      <Select>
                        <Select.Option value="锦江区">锦江区</Select.Option>
                        <Select.Option value="青羊区">青羊区</Select.Option>
                        <Select.Option value="金牛区">金牛区</Select.Option>
                        <Select.Option value="武侯区">武侯区</Select.Option>
                        <Select.Option value="成华区">成华区</Select.Option>
                        <Select.Option value="龙泉驿区">龙泉驿区</Select.Option>
                        <Select.Option value="新都区">新都区</Select.Option>
                        <Select.Option value="郫都区">郫都区</Select.Option>
                        <Select.Option value="温江区">温江区</Select.Option>
                        <Select.Option value="双流区">双流区</Select.Option>
                        <Select.Option value="青白江区">青白江区</Select.Option>
                        <Select.Option value="新津区">新津区</Select.Option>
                        <Select.Option value="都江堰市">都江堰市</Select.Option>
                        <Select.Option value="彭州市">彭州市</Select.Option>
                        <Select.Option value="邛崃市">邛崃市</Select.Option>
                        <Select.Option value="崇州市">崇州市</Select.Option>
                        <Select.Option value="简阳市">简阳市</Select.Option>
                        <Select.Option value="大邑县">大邑县</Select.Option>
                        <Select.Option value="浦江县">浦江县</Select.Option>
                        <Select.Option value="金堂县">金堂县</Select.Option>
                      </Select>
                    </Form.Item>

                    <Form.Item
                      label="办学内容"
                      rules={[
                        {
                          required: true,
                          message: "请输入办学内容!",
                        },
                      ]}
                      name="otext"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="许可编号"
                      rules={[
                        {
                          required: true,
                          message: "请输入许可编号!",
                        },
                      ]}
                      name="onum"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="办学资金"
                      rules={[
                        {
                          required: true,
                          message: "请输入办学资金!",
                        },
                      ]}
                      name="omoney"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="机构状态"
                      rules={[{ required: true, message: "请选择机构状态!" }]}
                      name="otop"
                    >
                      <Select>
                        <Select.Option value="待颁证">待颁证</Select.Option>
                        <Select.Option value="正常">正常</Select.Option>
                        <Select.Option value="黑名单">黑名单</Select.Option>
                        <Select.Option value="停业整顿">停业整顿</Select.Option>
                      </Select>
                    </Form.Item>
                  </Form>
                </Modal>
              </>
            ),
          },
          {
            label: `黑名单`,
            key: "3",
            children: (
              <>
                <Form
                  form={searchText3}
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch3}
                  className="boxBig"
                >
                  <Form.Item name="oname" label="机构名称">
                    <Input />
                  </Form.Item>

                  <Form.Item name="onum" label="许可编号">
                    <Input style={{ width: "220px" }} />
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear3}>
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={toExcel3}>
                      <CSVLink
                        className="edit"
                        data={data3}
                        filename="培训机构管理-黑名单导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns2}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                  dataSource={data3}
                />

                {/* 黑名单编辑框 */}
                <Modal
                  title="编辑"
                  open={isModalOpen2}
                  onOk={handleOk2}
                  onCancel={handleCancel2}
                  okText={"确认"}
                  cancelText={"取消"}
                >
                  <Form
                    form={editForm2}
                    name="basic"
                    initialValues={{ remember: true }}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    autoComplete="off"
                  >
                    <Form.Item label="序号" name="id">
                      <Input disabled />
                    </Form.Item>

                    <Form.Item
                      label="机构名称"
                      name="oname"
                      rules={[
                        {
                          required: true,
                          message: "请选择机构名称!",
                        },
                      ]}
                    >
                      <Select disabled allowClear={true}>
                      {ins.map((i: any) => (
                        <Select.Option value={i.oname}>{i.oname}</Select.Option>
                      ))}
                    </Select>
                    </Form.Item>

                    <Form.Item
                      label="法人代表"
                      rules={[
                        {
                          required: true,
                          pattern: /^[\u2E80-\u9FFF]+$/,
                          message: "请输入法人代表姓名!",
                        },
                      ]}
                      name="obehalf"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="办学地址"
                      name="oaddress"
                      rules={[{ required: true, message: "请选择办学地址!" }]}
                    >
                      <Select>
                        <Select.Option value="锦江区">锦江区</Select.Option>
                        <Select.Option value="青羊区">青羊区</Select.Option>
                        <Select.Option value="金牛区">金牛区</Select.Option>
                        <Select.Option value="武侯区">武侯区</Select.Option>
                        <Select.Option value="成华区">成华区</Select.Option>
                        <Select.Option value="龙泉驿区">龙泉驿区</Select.Option>
                        <Select.Option value="新都区">新都区</Select.Option>
                        <Select.Option value="郫都区">郫都区</Select.Option>
                        <Select.Option value="温江区">温江区</Select.Option>
                        <Select.Option value="双流区">双流区</Select.Option>
                        <Select.Option value="青白江区">青白江区</Select.Option>
                        <Select.Option value="新津区">新津区</Select.Option>
                        <Select.Option value="都江堰市">都江堰市</Select.Option>
                        <Select.Option value="彭州市">彭州市</Select.Option>
                        <Select.Option value="邛崃市">邛崃市</Select.Option>
                        <Select.Option value="崇州市">崇州市</Select.Option>
                        <Select.Option value="简阳市">简阳市</Select.Option>
                        <Select.Option value="大邑县">大邑县</Select.Option>
                        <Select.Option value="浦江县">浦江县</Select.Option>
                        <Select.Option value="金堂县">金堂县</Select.Option>
                      </Select>
                    </Form.Item>

                    <Form.Item
                      label="办学内容"
                      rules={[
                        {
                          required: true,
                          message: "请输入办学内容!",
                        },
                      ]}
                      name="otext"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="许可编号"
                      rules={[
                        {
                          required: true,
                          message: "请输入许可编号!",
                        },
                      ]}
                      name="onum"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="机构状态"
                      rules={[{ required: true, message: "请选择机构状态!" }]}
                      name="otop"
                    >
                      <Select>
                        <Select.Option value="待颁证">待颁证</Select.Option>
                        <Select.Option value="正常">正常</Select.Option>
                        <Select.Option value="黑名单">黑名单</Select.Option>
                        <Select.Option value="停业整顿">停业整顿</Select.Option>
                      </Select>
                    </Form.Item>
                  </Form>
                </Modal>
              </>
            ),
          },
          {
            label: "停业整顿",
            key: "4",
            children: (
              <>
                <Form
                  form={searchText4}
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch4}
                  className="boxBig"
                >
                  <Form.Item name="oname" label="机构名称">
                    <Input />
                  </Form.Item>

                  <Form.Item name="onum" label="许可编号">
                    <Input style={{ width: "220px" }} />
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear4}>
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={toExcel4}>
                      <CSVLink
                        className="edit"
                        data={data4}
                        filename="培训机构管理-停业整顿导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns3}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                  dataSource={data4}
                />

                {/* 停业整顿编辑框 */}
                <Modal
                  title="编辑"
                  open={isModalOpen3}
                  onOk={handleOk3}
                  onCancel={handleCancel3}
                  okText={"确认"}
                  cancelText={"取消"}
                >
                  <Form
                    form={editForm3}
                    name="basic"
                    initialValues={{ remember: true }}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    autoComplete="off"
                  >
                    <Form.Item label="序号" name="id">
                      <Input disabled />
                    </Form.Item>

                    <Form.Item
                      label="机构名称"
                      name="oname"
                      rules={[
                        {
                          required: true,
                          message: "请选择机构名称!",
                        },
                      ]}
                    >
                      <Select disabled allowClear={true}>
                      {ins.map((i: any) => (
                        <Select.Option value={i.oname}>{i.oname}</Select.Option>
                      ))}
                    </Select>
                    </Form.Item>

                    <Form.Item
                      label="法人代表"
                      rules={[
                        {
                          required: true,
                          pattern: /^[\u2E80-\u9FFF]+$/,
                          message: "请输入法人代表姓名!",
                        },
                      ]}
                      name="obehalf"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="办学地址"
                      name="oaddress"
                      rules={[{ required: true, message: "请选择办学地址!" }]}
                    >
                      <Select>
                        <Select.Option value="锦江区">锦江区</Select.Option>
                        <Select.Option value="青羊区">青羊区</Select.Option>
                        <Select.Option value="金牛区">金牛区</Select.Option>
                        <Select.Option value="武侯区">武侯区</Select.Option>
                        <Select.Option value="成华区">成华区</Select.Option>
                        <Select.Option value="龙泉驿区">龙泉驿区</Select.Option>
                        <Select.Option value="新都区">新都区</Select.Option>
                        <Select.Option value="郫都区">郫都区</Select.Option>
                        <Select.Option value="温江区">温江区</Select.Option>
                        <Select.Option value="双流区">双流区</Select.Option>
                        <Select.Option value="青白江区">青白江区</Select.Option>
                        <Select.Option value="新津区">新津区</Select.Option>
                        <Select.Option value="都江堰市">都江堰市</Select.Option>
                        <Select.Option value="彭州市">彭州市</Select.Option>
                        <Select.Option value="邛崃市">邛崃市</Select.Option>
                        <Select.Option value="崇州市">崇州市</Select.Option>
                        <Select.Option value="简阳市">简阳市</Select.Option>
                        <Select.Option value="大邑县">大邑县</Select.Option>
                        <Select.Option value="浦江县">浦江县</Select.Option>
                        <Select.Option value="金堂县">金堂县</Select.Option>
                      </Select>
                    </Form.Item>

                    <Form.Item
                      label="办学内容"
                      rules={[
                        {
                          required: true,
                          message: "请输入办学内容!",
                        },
                      ]}
                      name="otext"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="许可编号"
                      rules={[
                        {
                          required: true,
                          message: "请输入许可编号!",
                        },
                      ]}
                      name="onum"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="机构状态"
                      rules={[{ required: true, message: "请选择机构状态!" }]}
                      name="otop"
                    >
                      <Select>
                        <Select.Option value="待颁证">待颁证</Select.Option>
                        <Select.Option value="正常">正常</Select.Option>
                        <Select.Option value="黑名单">黑名单</Select.Option>
                        <Select.Option value="停业整顿">停业整顿</Select.Option>
                      </Select>
                    </Form.Item>
                  </Form>
                </Modal>
              </>
            ),
          },
        ]}
      />
    </div>
  );
};
export default Training;
